{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>博物馆参观指南</title>
    <!-- plugins:css -->
    <link rel="stylesheet" href="{% static 'vendors/mdi/css/materialdesignicons.min.css' %}">
    <link rel="stylesheet" href="{% static 'vendors/base/vendor.bundle.base.css' %}">
    <!-- endinject -->
    <!-- plugin css for this page -->
    <link rel="stylesheet" href="{% static 'vendors/datatables.net-bs4/dataTables.bootstrap4.css' %}">
    <!-- End plugin css for this page -->
    <!-- inject:css -->
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <!-- endinject -->
    <script type="text/javascript" src="{% static 'js/echarts.min.js' %}"></script>
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
</head>

<body style=" background: #f3f3f3;">
<div class="container-scroller col-md-12">
    <div class="container-fluid page-body-wrapper">
        <div class="col-md-12 ">
            <nav class="navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row">
            <div class="navbar-brand-wrapper d-flex justify-content-center">
        <div class="navbar-brand-inner-wrapper d-flex justify-content-between align-items-center w-100">
          <a class="navbar-brand brand-logo" href="{% url 'index' %}"><img src='{% static 'images/logo.svg' %}' alt="logo"/></a>
        </div>
      </div>
      <div class="navbar-menu-wrapper d-flex align-items-center justify-content-center">
        <ul class="navbar-nav w-100">
           <h1 class="display-3">博物馆指南·个人主页</h1>
        </ul>
        <ul class="navbar-nav navbar-nav-right">
            <li class="nav-item nav-profile">
            <a class="w-100 count-indicator  d-flex justify-content-center align-items-center" href="{% url 'index' %}" >
            返回首页

            </a></li>
        </ul>

        </button>
      </div>
    </nav>
        <div class="content-wrapper">
            <div class="row col-md-12">
                <div class="col-md-12 grid-margin stretch-card">
                    <div class="card">
                        <div class="card-body dashboard-tabs p-0">
                            <div class="tab-content py-0 px-0">
                                <div class="tab-pane fade show active" id="overview" role="tabpanel"
                                     aria-labelledby="overview-tab">
                                    <div class="d-flex flex-wrap justify-content-xl-between">
                                        <div class="d-flex border-md-right flex-grow-1 align-items-center justify-content-center p-3 item">
                                            <i class="mdi mdi-account mr-3 icon-lg text-warning"></i>
                                            <div class="d-flex flex-column justify-content-around">
                                                <small class="mb-1 text-muted">用户名称</small>
                                                <h5 class="mr-2 mb-0">{{ user.username }}</h5>
                                            </div>
                                        </div>
                                        <div class="d-flex border-md-right flex-grow-1 align-items-center justify-content-center p-3 item">
                                            <i class="mdi mdi-cellphone-iphone mr-3 icon-lg text-danger"></i>
                                            <div class="d-flex flex-column justify-content-around">
                                                <small class="mb-1 text-muted">手机号码</small>
                                                <h5 class="mr-2 mb-0">{{ user.mobile_phone }}</h5>
                                            </div>
                                        </div>
                                        <div class="d-flex border-md-right flex-grow-1 align-items-center justify-content-center p-3 item">
                                            <i class="mdi mdi-email mr-3 icon-lg text-success"></i>
                                            <div class="d-flex flex-column justify-content-around">
                                                <small class="mb-1 text-muted">邮箱地址</small>
                                                <h5 class="mr-2 mb-0">{{ user.email }}</h5>
                                            </div>
                                        </div>
                                        <div class="d-flex border-md-right flex-grow-1 align-items-center justify-content-center p-3 item">
                                            <i class="mdi mdi-logout mr-3 icon-lg text-warning"></i>
                                            <div class="d-flex flex-column justify-content-around">
                                                {#                            <small class="mb-1 text-muted">退出登录</small>#}
                                                <h5 class="mr-2 mb-0 justify-content-center"><a
                                                        href="{% url 'logout' %}">退 出 登 录</a></h5>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row col-md-12">
                <div class="col-md-12 stretch-card">
                    <div class="card">
                        <div class="card-body">
                            <p class="card-title">收藏列表</p>
                            <div class="table-responsive">
                                <table id="recent-purchases-listing" class="table">
                                    <thead>
                                    <tr>
                                        <th>博物馆序号</th>
                                        <th>名称</th>
                                        <th>省份</th>
                                        <th>属性</th>
                                        <th>收藏时间</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                     {% for vo in favourite_list %}
                                        <tr>
                                            <td>{{ vo.clt_relation_museum.id }}</td>
                                            <td><a href="/app01/museuminfo/{{ vo.clt_relation_museum.name }}">{{ vo.clt_relation_museum.name }}</a></td>
                                            <td>{{ vo.clt_relation_museum.province }}</td>
                                            <td>{{ vo.clt_relation_museum.character }}</td>
                                            <td>{{ vo.clt_time }}</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {#          </div>#}
        </div>
        </div>
        <!-- page-body-wrapper ends -->
    </div>
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="{% static 'vendors/base/vendor.bundle.base.js' %}"></script>
<script src="{% static 'js/hoverable-collapse.js' %}"></script>
<script src="{% static 'js/template.js' %}"></script>
<script src="{% static 'js/off-canvas.js' %}"></script>
<style>
.topbar{background:#fff;height:.44rem;position:fixed;top:0;left:0;width:100%;z-index:1000}.topbar .title{text-align:center;font-size:.2rem;line-height:.44rem;font-weight:700}.topbar .title a{display:inline-block;color:#000}.topbar .title a.new-bar{color:#fff}.topbar .top-icon{z-index:100;position:absolute;top:0;width:.3rem;text-align:center}.topbar .top-icon.logo-icon{float:left;left:12px;top:12px}.topbar .top-icon.more-icon{right:12px}.topbar .top-icon.search-icon{right:.6rem}.topbar .top-icon .museum-logo-img{width:22px}.topbar .top-icon .layout-icons{color:#000;line-height:.44rem;font-size:.22rem;font-weight:700}.topbar .top-icon .layout-icons.new-bar{color:#fff}.topbar .more{width:1.28rem;background:#fff;position:absolute;right:.06rem;top:.44rem;box-shadow:0 2px 2px rgba(0,0,0,.1);z-index:2;border:1px solid #ededed}.topbar .more.hide{display:none}.topbar .more li{width:100%;height:.44rem;line-height:.44rem;color:#333;font-size:.14rem}.topbar .more li.more-login{position:relative}.topbar .more li.more-login img{width:.2rem;height:.2rem;border:1px solid #b2d0f9;border-radius:.2rem;vertical-align:middle}.topbar .more li.more-login .user-name{width:.64rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar .more li:not(:last-child){border-bottom:1px solid #eee}.topbar .more li .active{display:block;height:100%}.topbar .more li.more-editAbstractImg{display:none}.topbar .more li a{color:#666}.topbar .more li em{color:#666;margin-left:13px;margin-right:13px;font-size:.16rem}.topbar .more li em.user-img{position:relative;margin-left:11px;margin-right:11px}.topbar .more li em.user-img.hasMsg:after{position:absolute;content:"";right:-3px;top:0;background:red;width:6px;height:6px;border-radius:50%;border:1px solid #fff;box-shadow:0 0 1px 0 #ccc}.topbar .more li em.layout-icons_feedback{vertical-align:-1px}.topbar .more li label{display:inline-block;vertical-align:top;margin-right:14px}.topbar .layer{width:100%;height:10rem;opacity:.5;position:absolute;top:0;left:0;z-index:1}.topbar .layer.hide{display:none}.topbar .search-con{position:absolute;left:0;top:0;width:100%;height:.56rem;z-index:10000;background:#fff;text-align:left;display:none}@media (max-width:400px){.topbar .title{font-size:.18rem}}.museum-search-suggestion .wgt-search-suggestion__list{max-height:5.75rem}.museum-search-suggestion .wgt-search-suggestion-item{padding:0 5%}.museum-search-suggestion .separator{height:.08rem;background:#F8F8F8;width:137%;margin-left:-20%}.museum-search-suggestion .sug-collection{height:.44rem;margin:.12rem 0}.museum-search-suggestion .sug-collection .sug-collection-img{float:left;width:.43rem;height:.43rem;border-radius:50%}.museum-search-suggestion .sug-collection .sug-colletion-detail{float:left;width:78%;margin-left:.12rem}.museum-search-suggestion .sug-collection .sug-colletion-name{font-size:.18rem;color:#333;height:.18rem;line-height:.18rem;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.museum-search-suggestion .sug-collection .sug-colletion-museumName{margin-top:.09rem;font-size:.13rem;color:#999;height:.13rem;line-height:.13rem}.museum-search-suggestion .sug-clock-icon{color:#ccc;position:relative;top:2px;margin-right:6px}.museum-search-suggestion .sug-museum-name{width:88%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;height:.18rem;line-height:.18rem;position:relative;top:.04rem}.museum-search .wgt-search-history-item__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#no-search-result{text-align:center;margin-top:47%;display:none}#no-search-result .no-result-img{width:140px}#no-search-result .no-result-desc{color:#666;font-size:.16rem;margin-top:.09rem}</style>
<!-- endinject -->
</body>

</html>

</div>


{#    <div class="box-body table-responsive no-padding">#}
{#        <table class="table table-hover">#}
{#            <tr>#}
{#                <th>收藏编号</th>#}
{#                <th>博物馆编号</th>#}
{#                <th>博物馆名称</th>#}
{#                <th>博物馆省份</th>#}
{#            </tr>#}
{#            {% for vo in favourite_list %}#}
{#            <tr>#}
{#                <td>{{ vo.id }}</td>#}
{#                <td>{{ vo.clt_relation_museum.id }}</td>#}
{#                <td>{{ vo.clt_relation_museum.name }}</td>#}
{#                <td>{{ vo.clt_relation_museum.province }}</td>#}
{#            </tr>#}
{#        {% endfor %}#}
{#        </table>#}
{#    </div>#}

{#    <div class="box-body table-responsive no-padding">#}
{#        <table class="table table-hover">#}
{#            <tr>#}
{#                <th>账号名</th>#}
{#                <th>手机号</th>#}
{#                <th>邮件地址</th>#}
{#                <th>密码</th>#}
{#            </tr>#}
{#            <tr>#}
{#                <td>{{ user.username }}</td>#}
{#                <td>{{ user.mobile_phone }}</td>#}
{#                <td>{{ user.email }}</td>#}
{#                <td>{{ user.password }}</td>#}
{#            </tr>#}
{#        </table>#}
{#    </div>#}
